<script setup lang="ts">
import { ref } from 'vue'
import type { Filter } from '@/type/User'

const props = defineProps<{
  isShow: boolean
  filter: Filter
}>()

const expand = ref<boolean>(true)

function expandFilter() {
  expand.value = !expand.value
}
</script>

<template>
  <el-card v-if="props.isShow" style="box-shadow: none">
    <el-row justify="center">
      <el-col :span="23">
        <slot name="header"></slot>
      </el-col>
      <el-col class="s-flex-x-y-center" style="margin-bottom: 18px" :span="1">
        <el-icon @click="expandFilter" v-if="!expand" class="filter-left-icon">
          <ArrowLeft />
        </el-icon>
        <el-icon @click="expandFilter" v-else class="filter-left-icon">
          <ArrowDown />
        </el-icon>
      </el-col>
    </el-row>
    <transition name="expand">
      <div v-if="expand">
        <slot name="row"></slot>
        <el-form :model="filter" label-width="auto">
          <el-form-item label="创建时间">
            <el-col :span="5">
              <el-date-picker  type="datetime" style="width: 100%" v-model="filter.gmtCreateStart"> </el-date-picker>
            </el-col>
            <el-col :span="1" class="text-center s-flex-x-y-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="5">
              <el-date-picker  type="datetime" style="width: 100%" v-model="filter.gmtCreateEnd"> </el-date-picker>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建人">
                <el-input v-model="filter.createBy" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="修改人">
                <el-input v-model="filter.modifyBy" />
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
    </transition>
  </el-card>
</template>

<style scoped>
@import '@/assets/main.css';

:deep(.el-card__body) {
  padding: 20px 20px 0 20px;
}

.filter-left-icon {
  cursor: pointer;
}

.expand-enter-active {
  transition:
    max-height 0.6s ease-out,
    opacity 0.6s ease-out;
}

.expand-leave-active {
  transition: max-height 0.2s ease-out;
}

.expand-enter-from,
.expand-leave-to {
  max-height: 0;
}

.expand-enter-to,
.expand-leave-from {
  max-height: 1000px; /* 需大于内容实际高度 */
}
</style>
